<template>
  <div class="create-account">
    <div class="create-header">
      <el-page-header @back="$router.go(-1)">
        <template #content>
          <h4>注册新账号</h4>
        </template>
      </el-page-header>
    </div>
    <div class="card-wrapper flex">
      <card-form
        ref="formRef"
        v-model="formData"
        :rules="rules"
        v-bind="formConfig"
        class="card-form"
      >
        <template v-if="!showResult">
          <el-form-item
            label="账号名"
            prop="accountName"
          >
            <el-input
              v-model="formData.accountName"
              placeholder="请输入账号名如：admin"
            />
          </el-form-item>
          <el-form-item
            label="手机号"
            prop="phone"
          >
            <el-input
              v-model="formData.phone"
              placeholder="请输入手机号"
            />
          </el-form-item>
          <el-form-item
            label="邮箱"
            prop="email"
          >
            <el-input
              v-model="formData.email"
              placeholder="请输入邮箱"
            />
          </el-form-item>
          <el-form-item
            label="真实姓名"
            prop="name"
          >
            <el-input
              v-model="formData.name"
              placeholder="请输入真实姓名"
            />
          </el-form-item>
          <el-form-item
            label="账号类型"
            prop="accountType"
          >
            <el-radio-group v-model="formData.accountType">
              <el-radio-button
                label="企业"
                value="enterprise"
              />
              <el-radio-button
                label="个人"
                value="personal"
              />
              <el-radio-button
                label="团队"
                value="team"
              />
              <el-radio-button
                label="游客"
                value="visitor"
              />
              <el-radio-button
                label="其他"
                value="other"
              />
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
          >
            <el-input
              v-model="formData.password"
              show-password
              placeholder="请输入密码"
              type="password"
            />
          </el-form-item>
          <el-form-item
            label="确认新密码"
            prop="confirmPwd"
          >
            <el-input
              v-model="formData.confirmPwd"
              show-password
              placeholder="再次确认新密码"
              type="password"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submit"
            >提交</el-button>
          </el-form-item>
        </template>
        <el-result
          v-else
          icon="success"
          title="注册成功"
          sub-title="快去登录吧"
        >
          <template #extra>
            <el-button
              type="primary"
              @click="$router.replace(`/${LOGIN_NAME}`)"
            >返回登录</el-button>
          </template>
        </el-result>
      </card-form>
    </div>
  </div>
</template>

<script setup>
import { isPhone, isEmail } from '@/utils/regexp'
import useForm from '@/hooks/useForm'

const { formData, formRef, formConfig } = useForm(
  {
    accountName: '',
    phone: '',
    email: '',
    name: '',
    accountType: 'personal',
    password: '',
    confirmPwd: '',
  },
  { labelWidth: 105 },
)
const rules = {
  accountName: [{ required: true, message: '请输入账号名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      validator: (_rule, value, callback) => {
        if (!isPhone(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      },
    },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      validator: (_rule, value, callback) => {
        if (!isEmail(value)) {
          callback(new Error('请输入正确的邮箱'))
        } else {
          callback()
        }
      },
    },
  ],
  name: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
  accountType: [{ required: true, message: '请选择账号类型', trigger: 'change' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  confirmPwd: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (_rule, value, callback) => {
        if (value !== formData.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
    },
  ],
}

const showResult = ref(false)

async function submit() {
  await formRef.value.validate()
  showResult.value = true
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixins.scss';

.create-header {
  padding: $space-medium-s;
  background-color: var(--el-bg-color);
}

.card-wrapper {
  width: 100%;
  flex-direction: column;
  justify-content: center;
}

.card-form {
  width: 90%;

  @include responsive-style('large-screen', 'desktop') {
    width: 45%;
  }
}
</style>
